<template>
	<view>
		<view class="pore" style="z-index: 9999;">
			<u-navbar title="美食" bgColor="transparent" @leftClick="leftBack" :titleStyle="{'color':'transparent'}">
				<view class="flex" slot="right" :style="{'marginRight':menuWidth + 'px'}">
					<view class="nav-left flex">
						<view class="wx">
							<button open-type="share">
								<!-- <u-icon name="share-square" size="24" color="#34314F"></u-icon> -->
								<image src="../static/images/share.png" style="width: 48rpx;height: 48rpx;"></image>
							</button>
						</view>
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="uni-margin-wrap" v-if="detail.imgs && detail.imgs.length > 0">
			<view class="pore">
				<swiper class="swiper" :current="banIndex" @change="changeSwiper" circular indicator-dots autoplay
					:interval="3000" indicator-active-color="#FFDE6D" :style="{ height: swiperHeight + 'px' }">
					<swiper-item v-for="(item,index) in detail.imgs" :key="index" class="flex-au"
						@click="$utils.previewImages(index,detail.imgs)">
						<image :src="api_host + item" mode="widthFix" class="width100"></image>
					</swiper-item>
				</swiper>
				<view class="ban-count cfff f26">
					{{banIndex + 1}} / {{detail.imgs.length}}
				</view>
			</view>
		</view>
		<!-- <view class="price_box">
			<view>
				<span class="cfff f32">￥</span>
				<span class="price">{{detail.salePrice}}</span>
				<span class="oldprice ml10">￥{{detail.originalPrice}}</span>
				<span class="cfff f28 ml30">已售{{detail.saleVolume}}</span>
			</view>
		</view> -->
		<view class="content">
			<view class="content_title p30">
				<view class="flex-jus borderbom">
					<view class="c343 f36 fw500">{{detail.storeName}}</view>
					<view class="collect" :class="detail.isCollection == 1 ? 'active' : ''" @click="starlikeBtn(1,6,id)">
						<image :src="detail.isCollection==1?'../static/images/star.png':'../static/images/collect.png'"
							style="width: 58rpx;height: 58rpx;margin-left: 28rpx;"></image>
						<text class="collect-text">收藏</text>
					</view>
				</view>
				<view class="mt20">
					<view class="flex-jus">
						<view class="f26 flex mt20">
							<u-rate count="5" v-model="detail.score" activeColor="#FFDE6D" readonly></u-rate>
							<text class="cff7 ml10">{{detail.score}}</text>
							<text class="ml20 c999">{{detail.observeNumber}}条评价</text>
						</view>
						<view class="f26">
							<text>￥{{detail.unitPrice}} | {{detail.variety}}</text>
						</view>
					</view>
					<view style="width: 200rpx;" class="flex-cen mt20">
						<u-tag text="消费人数1千+" size="mini" bgColor="#5D5B73"></u-tag>
					</view>
					<view class="mt20 f26">
						<text>营业时间</text>
						<text class="ml20">{{detail.businessHours}}</text>
					</view>
				</view>

				<view class="areabox mt20 flex-jus">
					<view>
						<p class="f26 fw500">距你{{distance}}km</p>
						<!-- <p class="f26 fw500">
							<distance></distance>
						</p> -->
						<p class="f26 name textoverflow2">{{detail.storeName}} {{detail.storeAddr}}
						</p>
					</view>
					<view class="flex">
						<view class="radius50 bgFff p20 textC"
							@click="openAddress(detail.longitude,detail.latitude,detail.storeName,detail.storeAddr)">
							<view class="">
								<image src="../static/images/address.png" style="width:40rpx;height: 40rpx;">
								</image>
							</view>
							<view class="c343 f26">导航</view>
						</view>
						<view class="radius50 bgFff p20 textC ml30" @click="maketel(detail.phone)">
							<view class="">
								<image src="../static/images/tel.png" mode="" style="width:40rpx;height: 40rpx;">
								</image>
							</view>
							<view class="c343 f26">电话</view>
						</view>
					</view>
				</view>
			</view>

			<view class="c343 f36 fw500">优惠团购</view>
			<view class="tuangou" @click="togroupdetail(item.id)" v-for="(item,index) in detail.goodsInfoList"
				:key="index">
				<view style="display: flex;flex-direction: column;">
					<image :src="api_host+item.icon"
						style="width: 227rpx;height: 227rpx;border-radius: 15rpx;z-index: 99;">
					</image>
					<view class="ms_djs flex f24" v-if="item.goodsSeckill">
						<view class="mt10 ml10" style="color: #78768A;">距结束</view>
						<view class="f24 mt10">
							<count-down :times="item.goodsSeckill.downTimes"></count-down>
						</view>
					</view>
				</view>
				<image src="../static/images/qwbj.png"
					style="width: 120rpx;height: 40rpx;position: absolute;top: 30rpx;left: 30rpx;"></image>
				<view class="flex1">
					<view class="sub-title">
						<text class="f32 fw500">{{item.brand}} | {{item.goodName}}
						</text>
					</view>
					<view class="f24 ml20 mt10 flex flex-wrap">
						<view class="mr10 mb10" v-for="(item2,index2) in item.tags" :key="index2">
							<u-tag shape="circle" size="mini" color="#34314F" bgColor="#f7f7f7" :text="item2"
								borderColor="#f7f7f7"></u-tag>
						</view>
					</view>
					<view class="box_bot flex-jus ml20">
						<view class="ml20">
							<view>
								<span class="cff7 f28">￥</span>
								<span class="cff7 f36 fw500">{{item.salePrice}}</span>
								<span style="text-decoration: line-through"
									class="f24 ml10 c999">￥{{item.originalPrice}}</span>
							</view>
							<view class="f24 flex cff7">
								<image src="../static/images/lisheng.png" style="width: 24rpx;height: 24rpx;">
								</image>
								<text>立省￥{{(item.originalPrice - item.salePrice) | toFixed2}}</text>
								<text class="ml10">已售{{item.saleVolume}}</text>
							</view>
						</view>
						<view class="box_bot_right flex-cen">
							<image src="../static/images/box_bg.png"
								style="width: 130rpx;height: 110rpx;position: absolute;right: 0;"></image>
							<image src="../static/images/qiang.png" class="mr10"
								style="width: 42rpx;height: 50rpx;z-index: 99;">
							</image>
							<image class="mr10" src="../static/images/right.png" mode="widthFix"
								style="width: 28rpx;z-index: 99;">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- //优惠券 -->
		<u-popup v-if="show_yhq" :show="show_yhq" @close="closeshowyhq" mode="center"
			:customStyle="{'width':'80%','position':'relative'}" @open="show_yhq = true" round="20"
			bgColor="transparent">
			<view class="p30 pore textC" style="z-index: 120;">
				<view class="c343 bold f40">{{coupon.name}}</view>
				<u-gap height="50"></u-gap>
				<view class="cfff f46" v-if="coupon.conpType == 1">
					满{{coupon.conpTextObject.fullAmount}}减{{coupon.conpTextObject.deductionAmount}}</view>
				<view class="cfff f46" v-if="coupon.conpType == 2">
					{{coupon.conpTextObject.discount/10}}折，最高减{{coupon.conpTextObject.maxReduction}}
				</view>
				<view class="cfff f46" v-if="coupon.conpType == 3">
					{{coupon.name}}
				</view>
				<u-gap height="50"></u-gap>
				<!-- <view class="cfff f32">全家政通用</view> -->
				<view class="cfff f26" v-if="coupon.lifespanType == 1">有效期: {{coupon.lifespanTextObject.startTime}} -
					{{coupon.lifespanTextObject.endTime}}
				</view>
				<view class="cfff f26" v-if="coupon.lifespanType == 2">有效期: {{coupon.lifespanTextObject.lifespan}}天
				</view>
				<u-gap height="20"></u-gap>
				<view class="flex-au">
					<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx','width':'50%'}"
						shape="circle" @click="receiveCoupon">领取</u-button>
				</view>
				<u-gap height="30"></u-gap>
				<view class="flex-au" @click="closeshowyhq">
					<u-icon name="close-circle-fill" color="#000" size="26"></u-icon>
				</view>
			</view>
			<image src="../static/images/yhq_bg.png" mode="widthFix" class="yhq_bg"></image>
		</u-popup>
		<!-- //优惠券领取成功 -->
		<u-popup :show="show_yhq_success" @close="closeshowsuccess" mode="center"
			:customStyle="{'width':'30%','position':'relative'}" @open="show_yhq_success = true" round="20"
			bgColor="#333">
			<view class="p30 pore textC">
				<image src="../static/images/coin.png" mode="widthFix" style="width: 87px;"></image>
				<view class="cfff f24">领取成功</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import appInfo from '@/common/appInfo.js'
	import {
		getGoodsInfo,
		getGouponByid,
		getGoodsStoreByid
	} from '@/common/api_tuangou.js'
	import {
		getHomedetail,
		receiveCoupon
	} from '@/common/api_housekeeping.js'
	// import distance from '@/components/distance/index.vue'
	import countDown from '@/components/countDown/index.vue'
	export default {
		components: {
			countDown
		},
		data() {
			return {
				banIndex: 0,
				swiperHeight: 300,
				longitude: 115.082256,
				latitude: 30.205922,
				detail: {
					imgs: [],
					goodsInfoList: [],
					goodsStores: []
				},
				show_shop: false,
				show_yhq: false,
				show_yhq_success: false,
				coupon: {},
				id: '',
				pjTag: [],
				commentList: [],
				addrLocation: {},
				distance: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getGoodsStoreByid()
		},
		mounted() {
			// this.getGoodsInfo()
			this.getGouponByid()
		},
		onShareAppMessage(res) {
			return {
				title: '东楚畅通',
				path: '/groupPurchase/detail/shopdetail?id=' + this.detail.id,
				imageUrl: this.api_host + this.detail.icon,
				desc: this.detail.brand,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		filters: {
			toFixed2(val) {
				return Number(val).toFixed(2)
			}
		},
		methods: {
			showshop() {
				this.show_shop = true
			},
			closepopup() {
				this.show_shop = false
			},
			closeshowyhq() {
				this.show_yhq = false
			},
			closeshowsuccess() {
				this.show_yhq_success = false
			},
			async getGoodsStoreByid() {
				let res = await getGoodsStoreByid({
					id: this.id
				})
				this.detail = res.data
				if(res.data.storeImages) {
					this.detail.imgs = res.data.storeImages.split(',')
				} else {
					this.detail.imgs = []
				}
				this.detail.goodsInfoList = this.detail.goodsInfoList.map(item => {
					return {
						...item,
						tags: item.goodEmployValues ? item.goodEmployValues.split(',') : []
					}
				})
				this.detail.goodsInfoList.forEach(item => {
					if (item.goodsSeckill) {
						let endTime = item.goodsSeckill.endDate.replace(/-/g, "/") + ' ' + item
							.goodsSeckill
							.endTime
						let nowTimes = new Date().getTime()
						let endTimes = new Date(endTime).getTime()
						item.goodsSeckill.downTimes = endTimes - nowTimes
					}
				})
			},
			togroupdetail(id) {
				uni.navigateTo({
					url: '/groupPurchase/detail/index?id=' + id
				})
			},
			async getGouponByid() {
				let res = await getGouponByid({
					id: this.id
				})
				this.coupon = res.data || {};
				if (this.coupon.id) {
					this.show_yhq = true
				}
			},
			async receiveCoupon() {
				// #ifdef MP-WEIXIN
				let messageRes = await this.$utils.messageSubscriptionAuthorization(appInfo.tmplIds.coupon);
				// #endif
				uni.showLoading({
					mask: true
				})
				const res = await receiveCoupon({
					id: this.coupon.id
				})
				if (res.code == 200) {
					this.show_yhq = false
					this.show_yhq_success = true
					setTimeout(() => {
						this.show_yhq_success = false
					}, 1000)
				}
				uni.hideLoading()
			},
			openAddress(lon, lat, name, addr) {
				uni.openLocation({
					latitude: parseFloat(lat),
					longitude: parseFloat(lon),
					name: name,
					address: addr
				})
			},
			maketel(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			getSysinfo() {
				let sysInfo = uni.getSystemInfoSync()
				this.swiperHeight = sysInfo.screenHeight * 0.6
			},
			/* 切换 swiper 滑块 */
			changeSwiper(e) {
				this.banIndex = e.detail.current;
			},
			toSureorder() {
				uni.navigateTo({
					url: '/groupPurchase/order/sureorder?id=' + this.detail.id
				})
			},
			// 确认授权后，获取用户位置
			getLocationInfo() {
				const that = this;
				uni.getLocation({
					type: "gcj02",
					success: function(res) {
						// 暂时
						that.longitude = res.longitude; //118.787575;
						that.latitude = res.latitude; //32.05024;
						that.address = res.address;
						that.distance = that.getMapDistance(that.longitude, that.latitude, that.detail
							.longitude,
							that.detail.latitude)
						console.log("获取当前的用户经度", that.longitude);
						console.log("获取当前的用户纬度", that.latitude);
						var long = 0;
						var lat = 0;
						//小数点保留六位  经度
						if (that.longitude.toString().indexOf('.') > 0) {
							const longlatsplit = that.longitude.toString().split('.');
							if (longlatsplit.length >= 2) {
								long = parseFloat(longlatsplit[0] === "" ? 0 : longlatsplit[0]) + parseFloat(
									"." + longlatsplit[1].slice(0, 6));
							}
						}
						if (that.latitude.toString().indexOf('.') > 0) {
							const longlatsplit1 = that.latitude.toString().split('.');
							if (longlatsplit1.length >= 2) {
								lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat(
									"." + longlatsplit1[1].slice(0, 6));
							}
						}
					},
				});
			},
			onReady() {
				setTimeout(() => {
					this.getLocationInfo();
				}, 500)
			},
			//进行经纬度转换为距离的计算
			Rad(d) {
				return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
			},
			//计算距离
			getMapDistance(lat1, lng1, lat2, lng2) {
				var radLat1 = this.Rad(lat1);
				var radLat2 = this.Rad(lat2);
				var a = radLat1 - radLat2;
				var b = this.Rad(lng1) - this.Rad(lng2);
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000; //输出为公里
				s = s.toFixed(2);
				return s;
			},
		}
	}
</script>

<style lang="scss">
	.nav-left {
		border-radius: 50%;
		padding: 10rpx;
		background-color: rgba(#fff, 0.8);
	}
	.sub-title {
		padding-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.yhq_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.ban-count {
		position: absolute;
		right: 50rpx;
		bottom: 30rpx;
		height: 40rpx;
		line-height: 40rpx;
		background-color: rgba(#000, 0.5);
		padding: 0 20rpx;
		border-radius: 50rpx;
		z-index: 99;
	}

	.price_box {
		height: 169rpx;
		background: #FF7F1C;
		border-radius: 58rpx 58rpx 0rpx 0rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.price {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 54rpx;
			color: #FFFFFF;
			line-height: 77rpx;
			text-align: left;
			font-style: normal;
		}

		.oldprice {
			width: 65rpx;
			height: 31rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: #ddd;
			line-height: 31rpx;
			text-align: left;
			font-style: normal;
			text-decoration: line-through
		}
	}

	.content {
		min-height: 300rpx;
		border-radius: 58rpx 58rpx 0rpx 0rpx;
		position: relative;
		bottom: 40rpx;
		z-index: 100;
		background-color: #FEF4E8;
		overflow: hidden;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-family: PingFangSC, PingFang SC;
		margin-top: 30rpx;

		.content_title {
			width: 688rpx;
			// height: 648rpx;
			background: #FFFFFF;
			border-radius: 38rpx;
			margin: 40rpx auto;
			box-sizing: border-box;

			.borderbom {
				border-bottom: 1px solid #ddd;
				padding-bottom: 20rpx;
			}

			.areabox {
				width: 627rpx;
				height: 150rpx;
				background: #F7F7F7;
				border-radius: 27rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.name {
					width: 310rpx;
					line-height: 35rpx;
				}
			}
		}

		.tuangoudetail {
			width: 688rpx;
			min-height: 300rpx;
			background: #FFFFFF;
			border-radius: 38rpx;
			margin: 40rpx auto;
			padding: 30rpx;
			box-sizing: border-box;

		}

		.goumaixvzhi {
			width: 688rpx;
			min-height: 300rpx;
			background: #FFFFFF;
			border-radius: 38rpx;
			margin: 40rpx auto;
			padding: 10rpx 30rpx 30rpx 30rpx;
			box-sizing: border-box;
		}

		.comment-item {
			width: 650rpx;
		}

		.menu-item {
			margin: 5rpx 10rpx 5rpx 5rpx;
			border: 1px solid transparent;

			.menu-item-box {
				width: 280rpx;
			}
		}

		.pj-tag-item {
			text-align: center;
			border: 1px solid #999;
			border-radius: 30rpx;
			padding: 10rpx 20rpx;
		}

		.add-count {
			position: absolute;
			right: 10rpx;
			top: 0;
			height: 100%;
			display: flex;
			align-items: center;
			width: 200rpx;
			justify-content: center;

			text {
				background-color: rgba(#000, 0.5);
				border-radius: 50rpx;
				color: #fff;
				padding: 10rpx 30rpx;
			}
		}
	}

	.bottomfixed {
		height: 165rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 38rpx 38rpx 0rpx 0rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	// .collect {
	// 	width: 198rpx;
	// 	height: 92rpx;
	// 	border-radius: 38rpx;
	// 	border: 2rpx solid #ddd;
	// 	// opacity: 0.63;
	// 	&.active {
	// 		background-color: #34314F;
	// 		.collect-text {
	// 			color: #FFDE6D;
	// 		}
	// 	}
	// }
	.collect {
		display: flex;
		align-items: center;
		width: 190rpx;
		height: 94rpx;
		border-radius: 40rpx;
		border: 2rpx solid rgba(52, 49, 79, 0.13);
		box-sizing: border-box;
		// opacity: 0.13;
		.collect-text {
			font-weight: 500;
			font-size: 28rpx;
			color: #34314F;
		}
		&.active {
			background-color: #34314F;
			.collect-text {
				color: #FFDE6D;
			}
		}
	}

	.activecl {
		background: #FFDE6D;
		opacity: 1;
		border: none;
	}

	.buyBtn {
		width: 227rpx;
		height: 92rpx;
		background: #FFDE6D;
		border-radius: 38rpx;
		backdrop-filter: blur(25px);
	}

	.oldprice {
		width: 65rpx;
		height: 31rpx;
		font-weight: 400;
		font-size: 27rpx;
		color: #ddd;
		line-height: 31rpx;
		text-align: left;
		font-style: normal;
		text-decoration: line-through
	}

	.item_box {
		width: 688rpx;
		height: 377rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.areabox {
		width: 627rpx;
		height: 150rpx;
		background: #F7F7F7;
		border-radius: 27rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.name {
			width: 310rpx;
			line-height: 35rpx;
		}
	}

	.tuangou {
		width: 688rpx;
		min-height: 335rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		margin-top: 20rpx;
		position: relative;
	}

	.box_bot {
		width: 381rpx;
		height: 110rpx;
		border-radius: 42rpx;
		background: #FFF6F0;
		padding: 20rpx 0;
		box-sizing: border-box;
		position: relative;

		.box_bot_right {
			// width: 100rpx;
			height: 110rpx;
			border-radius: 0 42rpx 42rpx 0;
			// background: #FF7C16;
		}
	}

	.ms_djs {
		width: 227rpx;
		height: 73rpx;
		background-color: #FFDE6D;
		border-radius: 0 0 15rpx 15rpx;
		margin-top: -10rpx;
	}
</style>